<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
		<style>
			/* 外边距  所有元素具备边框以外距离，四个，上下  左右
			 外边距问题1.行内元素：a i delete。。只支持左右边距
			            布局，支持左右推动效果
						解决方案：行转块！
			 */
			span{
				border:1px solid red;
				/* margin 外边距属性：一/四个属性值：上 右 下 左 */
				margin: 300px;  
				/* margin 外边距属性：二个属性值：上下 左右 */
				margin:100px 200px;
				/* margin 外边距属性：三个属性值：上 右左 下 */
				margin:100px 200px 300px;
				/* 常用属性：自适应居中 */
				margin:0 auto;
				margin-left:800px;
			}
			/* 外边距问题2：外边距合并问题 
			   上下元素都存在外边距
			   外边距垂直合并最大外边距为主，如何解决：
			   推荐：1.margin设置一个值，上下会垂直，去掉一个上下元素其中上下外边距
			*/
			.parent{
				width: 200px;
				height: 200px;
				background-color: #aa0000;
				/* 下外边距 */
				margin-bottom: 30px;
				/* 父元素：border：1px solid transparent */
				border: 1px solid transparent;
				/* 父元素：overflow：hidden；创建新块级上下文，组织外边距合并 */
				overflow:hidden;
			}
			#child{
				margin-top: 30px;
				width: 200px;
				height: 200px;
				background-color: #ffaaff;
				}
		</style>
	</head>
	<body>
		<h1>外边距合并</h1>
		<div id="parent">
		<div id="child"></div>
		</div>
		<hr>
		<!-- 元素： 存在与框模型=外边距+边框+内边距+内容
		 有些元素默认外边距  处理方案：通配选择器，去掉元素外边距
		
		 -->
		<!-- 元素：存在与框模型 -->
		<span>行内元素</span>
		<h1>块元素</h1>
		<input type="text" />
	</body>
</html>


<!-- 测元素是否存在外边距
     ul li            √
     form input       √
	 table tr  td     √
	 p                √
	 margin：0
 
 -->